<template>
  <div class="page">
    <!-- navbar -->
    <div style="height: 44px;">
      <i
        class="Icon"
        style="width: 44px;height: 44px;line-height: 44px;font-size: 20px;"
        @click="backHandle()"
      >arrow_back_ios_new</i>
    </div>

    <div style="font-size: 26px;">粵菜</div>
    <div
      style="margin-top: 12px;"
      v-for="(item,idx) in 5"
      :key="idx"
      @click="loadShopHandle()"
    >
      <van-skeleton
        title
        :row="2"
        :loading="loading"
        style="--van-skeleton-row-height:180px;"
      >
        <div>
          <div style="font-size: 20px;">广州酒家</div>
          <van-image
            src="https://p0.meituan.net/biztone/6828281_1629172615728.jpeg@380w_214h_1e_1c"
            fit="cover"
            height="180"
            width="100%"
            style="margin-top: 12px;border-radius: 8px;overflow: hidden;"
          />
        </div>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    backHandle() {
      this.$router.go(-1);
    },
    loadShopHandle() {
      this.$router.push({
        path: "/shop",
      });
    },
  },
};
</script>


<style scoped>
.page {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background-color: #fff;
}
</style>